<html>
<head>
  <meta charset="utf-8">
  <title>game</title>
  <style type="text/css">
    body{
      background-color: black;//设置背景颜色
    }
    .img{
      width: 500px;
      height: 500px;
      position: absolute;//设置绝对位置
    }
  </style>
</head>
<body>

<img src="img/player_right.gif" class="img" style="top: 0px; left:0px;"/>
<script src="jQuery.js"></script>
<script>
  function Change(){
    $("img").dblclick(function(){//双击变身,dblclick双击
      $("img").attr("src","img/player2.gif");//一个参数获取，两个参数设置

      $("img").dblclick(function(){//再双击还原
        $("img").attr("src","img/player_left.gif");
      })
    })
  }


  //switch实现
  function move(){
    $(window).keydown(function(e){//键盘按下的事件，用e来接收
      let top = parseInt($("img").css("top"));//将字符串解析成整数
      let left = parseInt($("img").css("left"));
      switch(e.keyCode){//用于获取代表键盘上的键的数字
        case 87:
          $("img").css("top",top - 50);
          break;
        case 83:
          $("img").css("top",top + 50);
          break;
        case 65:
          $("img").attr("src","img/player_left.gif");
          $("img").css("left",left - 50);
          break;
        case 68:
          $("img").attr("src","img/player_right.gif");
          $("img").css("left",left + 50);
          break;
        default:
          break;
      }
    })
  }

  $(function(){
    Change();
    move();
  })

</script>
</body>
</html>
